<template>
	<view class="coupon-sys">
		<view class="card-list-box">
			<u-empty style="margin: auto;" icon-size="150" mode="data" v-if="couponList.length == 0"></u-empty>
			<view class="card-centent-box" v-for="(item, index) in couponList" :key="index"
				:style="{backgroundImage: 'url(https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/06/01/e5abf31c-fd00-4fd0-8c2c-47a7aff3c77f.png)', backgroundSize: '100% 100%'}">
				<view class="left-card-box">
					<view class="coupon-title-text">
						{{item.couponName}}
					</view>
					<view class="coupon-content-text" v-if="item.reduceType == '1'">
						抵消金额：<span style="color: red; font-size: 32rpx; font-weight: bold;">￥ {{item.amount}}</span>
					</view>
					<view class="coupon-content-text" v-if="item.reduceType == '2'">
						折扣力度：<span style="color: red; font-size: 32rpx; font-weight: bold;"> {{item.discount * 100}}（折）</span>
					</view>
					<view class="coupon-content-text">
						发行数量：{{item.publishCount}}
					</view>
					<view class="coupon-content-text">
						有效期至：{{item.endTime.split(' ')[0]}}
					</view>
				</view>
				<view class="right-card-box" @click="shareCoupon(item.id)">
					<button class="sharing-btn" open-type="share">去分享</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponId: '',
				couponList: []
			}
		},
		onLoad(e) {
			const that = this
			console.log(e);
			this.$api.request.getShopCouponList({
				id: e.id
			}, res => {
				if(res.code == 200){
					that.couponList = res.data
				}
			})
		},
		onShareAppMessage(res) {
			return this.shareCoupon(this.couponId)
		},
		methods: {
			// 去分享
			shareCoupon(couponId) {
				this.couponId = couponId
				return {
					title: '领取优惠券',
					imageUrl: 'https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/06/01/b8a9eb27-67e3-455e-8edb-06ef4b159aa9.png',
					path: '/pagesB/coupon/user/getCoupon?id=' + couponId
				}
			},
		}
	}
</script>

<style lang="scss">
	.coupon-sys{
		width: 100vw;
		height: 100vh;
	}
	
	.card-list-box {
		width: 100vw;
		height: 99vh;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
	}
	
	.card-centent-box{
		width: auto;
		height: 200rpx;
		margin: 10rpx 30rpx;
		display: flex;
		flex-direction: row;
		border-radius: 30rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		border-left: 1rpx solid rgba(0, 0, 0, 0.1);
		background: #FFFFFF;	
		background-repeat: no-repeat;
	}
	
	.left-card-box{
		width: 64%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-content: space-around;
		padding-left: 20rpx;
	}
	
	.right-card-box {
		width: 36%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 30px;
		margin-right: 20rpx;
	}
	
	.coupon-title-text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 30rpx;		
		padding-top: 25rpx;
		margin-bottom: 10rpx;
	}
	
	.coupon-content-text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #828282;
		line-height: 30rpx;
		margin-bottom: 10rpx;
	}
	
	.sharing-btn {
		color: #FFFFFF;
		background: none;
		border: none;
	}
	
	button::after{
		display: none;
	}
</style>